<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-01-14 19:31:55
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-01-15 11:39:41
 * @FilePath: \recruitAPP\recruitApp\recruitApp\src\pages\user\Posts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <div class="body">
    <van-nav-bar
      title="人才"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="classify">
      <div>
        <span
          v-for="(item, index) in arr"
          :key="index"
          @click="change(index)"
          :class="{ active: index == nowIndex }"
          >{{ item }}</span
        >
      </div>
      <van-button type="default">筛选</van-button>
    </div>
    <div class="mainstay">
      <div
        class="main"
        v-for="(item, index) in arr1"
        :key="index"
        v-if="nowIndex == 0"
      >
        <div>
          <span>{{ item.name }}</span>
          <img src="../../assets/images/u1526.png" alt="" />
        </div>
        <div>
          {{ item.city }}<span>|</span>{{ item.time }}<span>|</span
          >{{ item.degree }}
        </div>
        <div>
          求职期望： <span>{{ item.company }}</span> 专业知识：
          <span>{{ item.people }}</span>
        </div>
      </div>
      <div
        class="main"
        v-for="(item, index) in arr2"
        :key="index"
        v-if="nowIndex == 1"
      >
        <div>
          <span>{{ item.name }}</span>
          <img src="../../assets/images/u1526.png" alt="" />
        </div>
        <div>
          {{ item.city }}<span>|</span>{{ item.time }}<span>|</span
          >{{ item.degree }}
        </div>
        <div>
          <span>{{ item.company }}</span>
          <span>{{ item.people }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 逻辑层 -->
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const value = ref("");
const arr = ref(["推荐", "看过我", "对我感兴趣"]);
const nowIndex = ref(0);
const change = (index) => {
  nowIndex.value = index;
};
const arr1 = reactive([
  {
    name: "小明",
    city: "广州",
    time: "1年经验",
    degree: "本科",

    company: "前端工程师",
    people: "顶级",
  },
  {
    name: "小胡",
    city: "北京",
    time: "3年经验",
    degree: "本科",

    company: "后端工程师",
    people: "顶级",
  },
  {
    name: "小红",
    city: "广州",
    time: "6年经验",
    degree: "本科",

    company: "前端工程师",
    people: "顶级",
  },
  {
    name: "小里",
    city: "广州",
    time: "3年经验",
    degree: "本科",

    company: "前端工程师",
    people: "顶级",
  },
  {
    name: "小孟",
    city: "广州",
    time: "6年经验",
    degree: "本科",

    company: "后端工程师",
    people: "顶级",
  },
  {
    name: "小时",
    city: "广州",
    time: "6年经验",
    degree: "本科",

    company: "后端工程师",
    people: "顶级",
  },
]);
const arr2 = reactive([
  {
    name: "土木工程师",
    city: "广州",
    time: "1年经验",
    degree: "本科",
    money: "9k-13k",
    company: "蓝天科技有限公司",
    people: "1000-10000人",
  },
  {
    name: "电气工程师",
    city: "北京",
    time: "3年经验",
    degree: "本科",
    money: "12k-13k",
    company: "飞天科技有限公司",
    people: "1000-10000人",
  },
  {
    name: "后端开发工程师",
    city: "广州",
    time: "6年经验",
    degree: "本科",
    money: "20k-25k",
    company: "威威科技有限公司",
    people: "1000-10000人",
  },
  {
    name: "后端开发工程师",
    city: "广州",
    time: "6年经验",
    degree: "本科",
    money: "20k-25k",
    company: "威威科技有限公司",
    people: "1000-10000人",
  },
  {
    name: "后端开发工程师",
    city: "广州",
    time: "6年经验",
    degree: "本科",
    money: "20k-25k",
    company: "威威科技有限公司",
    people: "1000-10000人",
  },
  {
    name: "后端开发工程师",
    city: "广州",
    time: "6年经验",
    degree: "本科",
    money: "20k-25k",
    company: "威威科技有限公司",
    people: "1000-10000人",
  },
]);
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
</script>
<!-- 样式层 -->
<style  scoped>
.body {
  background-color: #f2f2f2;
}
.classify {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 0 auto;
  justify-content: space-around;
  background-color: #fff;
}

.classify div {
  width: 80%;
}

.classify div span:nth-child(1) {
  margin-right: 5.3333vw;
}
.classify div span:nth-child(2) {
  margin-right: 5.3333vw;
}
.active {
  color: #0079fe;
}
.mainstay {
  padding-bottom: 13.3333vw;
}
.main {
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 2.6667vw;
  border-radius: 3vw;
}
.main div:nth-child(1) {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  margin-top: 2.6667vw;
  position: relative;
}
.main div:nth-child(1) img {
  position: absolute;
  height: 13vw;
  right: 0vw;
}
/* .main div:nth-child(1) span:nth-child(2) {
  font-size: 5.3333vw;
  color: #0079fe;
} */

.main div:nth-child(2) {
  margin: 1.6667vw 0;
  margin-left: 4.8333vw;
}

.main div:nth-child(2) span {
  margin: 0 0.8vw;
  color: #e4e4e4;
}
.main div:nth-child(3) {
  margin-left: 4.8333vw;
  margin-top: 1.6667vw;
  margin-bottom: 4vw;
}
.main div:nth-child(3) span:nth-child(1) {
  margin-right: 5.3333vw;
}
</style>